<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :hot-cities="hotCities"
               :current-alpha="currentAlpha"
               :cities="cities">
    </city-list>
    <city-alphabet :alphas="alphas"
                   @alpha-click="currentAlpha = $event"
                   @scroll-change="currentAlpha = $event"
                   :currentAlphaIndex="currentAlphaIndex">

    </city-alphabet>
  </div>
</template>

<script>

  import CityHeader from "./components/CityHeader"
  import CitySearch from "./components/CitySearch"
  import CityList from "./components/CityList"
  import CityAlphabet from "./components/CityAlphabet"
  import axios from "axios"

  export default {
    name: "City",
    components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet,
    },
    data() {
      return {
        hotCities: [],
        cities: {},
        alphas: [],
        currentAlphaIndex: -1,
        currentAlpha: "",
      }
    },
    methods: {

      handleCityData(response) {
          let data = response.data;
          console.log(data);
          if (!!data.ret) {
              this.hotCities = data.data.hotCities;
              this.cities = data.data.cities;
              this.alphas = Object.keys(this.cities);
          }
      }
    },
    mounted() {
      axios.get("/api/city.json")
          .then((response) => {
            this.handleCityData(response);
          });
    }
  }
</script>

<style scoped></style>